<template>
	<view class="content">
		<view class="title-panel">
			<image src="/static/loginbg.jpeg" class="titlebg" mode="aspectFill"></image>
			<view class="title-mask"></view>
			<view class="app-title">拍拍我自己</view>
			<view class="app-title-sub">AI人脸检测小工具</view>
		</view>
		<view class="photo-area" @click="chooseImage">
			<view class="image-text" v-if="imagePath.length==0">
				<view style="font-size:150%;">咔嚓，拍一张</view>
			</view>
			<image v-if="imagePath.length>0" :src="imagePath" class="face-image" mode="aspectFit"></image>
		</view>
		<view class="face-button" @click="faceScan">
			检测一下试试看
		</view>
		<view class="face-result" v-if="faces.length>0">
			<view class="face-item" v-for="(face,index) in faces" :key="face.face_id" :class="{'male':face.gender.type=='male','female':face.gender.type=='female'}">
				<view class="face-row">
					<view class="value">
					检测到一张{{face.beauty<30?"":face.beauty<40?"比较":face.beauty<50?"相当":face.beauty<70?"非常":face.beauty<80?"特别特别":""}}好看的脸，颜值达到
					<text style="font-size:150%;font-weight: bold;color:#FF9D4E;margin-left:5px;">{{Math.round(face.beauty,0)}}.</text>
					</view>
				</view>
				<view class="face-row">
					<view class="value">
						{{face.gender.type=="male"?"他":"她"}}是一个大约{{face.age}}岁、
						{{glasses[face.glasses.type]!=""?glasses[face.glasses.type]+"、":""}}
						{{faceShape[face.face_shape.type]}}、
						看上去{{
							expression[face.expression.type]=="不笑"?"心情一般般":
								expression[face.expression.type]=="微笑"?"挺开心的":"非常高兴"
						}}的
						<text style="font-size:120%;font-weight:bold;">{{gender[face.gender.type]}}.</text>
					</view>
				</view>
			
				<view class="face-row">
					<view class="value beauty right"></view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imagePath:'',
				token:'',
				faces:[],
				glasses:{"common":"戴着眼镜","none":"不戴眼镜","sun":"戴着墨镜"},
				gender:{"female":"女生","male":"男生"},
				expression:{"none":"不笑","smile":"微笑","laugh":"大笑"},
				faceShape:{"square":"方形脸","triangle":"锥形脸","oval":"椭圆形脸","heart":"心形脸","round":"圆形脸"}
			}
		},
		computed:{
			expressionText(type){
				var smile=this.expression[type];
				var result="";
				if(smile=="不笑") result="心晴一般般";
				else if(smile=="微笑") result="还挺开心的";
				else if(smile=="大笑") result="非常的开心";
				return result;
			}
		},
		onLoad() {
			this.token=uni.getStorageSync("token");
			if(!this.token){
				uni.reLaunch({
					url:'../login/login'
				})
			}
		},
		methods: {
			chooseImage(){
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original','compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['camera','album'], //从相册选择
				    success: (res)=> {
				        console.log(JSON.stringify(res.tempFilePaths));
						this.imagePath=res.tempFilePaths[0];
						this.faces=[];
				    }
				});
			},
			faceScan(){
				uni.showLoading({
					title:'正在扫描...'
				});
				uni.uploadFile({
					url: this.$serverUrl+"/api/ai-face?token="+this.token, //仅为示例，非真实的接口地址
					filePath: this.imagePath,
					name: 'image',
					success: (uploadFileRes) => {
						uni.hideLoading(); 
						if(uploadFileRes.statusCode==200){
							try{
								var result=JSON.parse(uploadFileRes.data);
								if(result!=null && result.result!=null){
									this.faces=result.result.face_list;
								}else{
									uni.showToast({
										title:"没找到人脸哦，换一张试试",
										icon:"none"
									})
								}
							}catch(e){
								uni.showToast({
									title:"人脸检测出错",
									icon:"none"
								})
							}
							
						}else{
							uni.showToast({
								title:"识别出错啦",
								icon:"none"
							})
						}
						
						
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		height:100vh;
		overflow-y: scroll;
		background-color:rgba(240,150,33,0.1);
	}
	.title-panel{
		width:750rpx;
		height:150px;
		flex-shrink: 0;
		position:relative;
	}
	.title-panel .titlebg{
		width:750rpx;
		height:150px;
		z-index: 5;
		position: absolute;
		top:0;
		left:0;
	}
	.title-panel .title-mask{
		width:750rpx;
		height:150px;
		z-index: 6;
		position: absolute;
		top:0;
		left:0;
		background-color: rgba(0,0,0,0.5);
	}
	.app-title{
		color:#fff;
		width:750rpx;
		font-size:200%;
		text-align: center;
		position: absolute;
		z-index: 10;
		top:30px;
	}
	.app-title-sub{
		top:80px;
		color:#fff;
		text-align: center;
		width:750rpx;
		letter-spacing: 25rpx;
		position: absolute;
		z-index: 10;
	}
	.photo-area{
		position:relative;
		display: flex;
		flex-shrink: 0;
		justify-content: center;
		align-items: center;
		width:750rpx;
		height:750rpx;
		margin-bottom:10px;
	}
	.image-text{
		font-size:90%;
		width:750rpx;
		height:750rpx;
		text-align: center;
		color:#696969;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color:rgba(240,150,33,0.2);
		box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
		
	}
	.photo-area .face-image{
		background-color:rgba(240,150,33,0.2);
	}
	.face-result{
		font-size:80%;
	}
	.face-result .title{
		margin:10px;
	}
	.face-image{
		width:750rpx;
		height:750rpx;
		box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	}
	.face-button{
		width:500rpx;
		height:44px;
		display: flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		background-color:#F0AD4E;
		color:#fff;
		border-radius: 22px;
	}
	.face-result{
		width:700rpx;
		padding:10px 25rpx;
		display: flex;
		flex-shrink: 0;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.face-item{
		padding:10px;
		display: flex;
		width:550rpx;
		flex-direction: column;
		border:1px solid  rgba(240,150,33,0.3);
		margin-top:10px;
		border-radius: 5px;
		box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
		background-color:rgba(240,150,33,0.1); 
	}
	
	.face-item.male{
		border:1px solid  rgba(40,240,33,0.3);
		background-color:rgba(40,240,33,0.1); ;
	}
	
	.face-item.female{
		border:1px solid  rgba(240,40,33,0.3);
		background-color:rgba(240,40,33,0.1); ;
	}
	
	.face-item.no-data{
		background-color:rgba(69,69,69,0.1) ;
		border:1px solid  #696969;
	}
	.face-row{
		width:100%;
		display: flex;
		font-size:100%;
		justify-content: space-between;
	}
	.face-row .label{
		font-weight: bold;
	}
	.face-item.no-data .face-row .name{
		color:#696969;
	}
	.face-row .value{
		color:#555555;
	}
	.face-row .beauty{
		font-size:120%;
		font-weight: bold;
	}
	
</style>